<template>
    <div id="app">
        <transition :name="transitionName">
            <router-view class="router" v-wechat-title="$route.meta.title"/>
        </transition>
        <nav-Tab :navStatus="mystatus"></nav-Tab>
    </div>
</template>

<script>
    import navTab from './components/navTab';

    export default {
        name: 'App',
        data() {
            return {
                mystatus: 1,
                transitionName: 'slide-right' , // 默认动态路由变化为slide-right
                popList:[

                ]
            }
        },
        components: {
            navTab
        },
        mounted(){
            // this.$router.beforeEach((to, from, next) => { //to:即将前往的页面,from:从哪个页面来,next:下一步操作
            //     console.log(to)
            //     next()
            //     // if (to.matched.some(res => res.login)) {  //判断是否登录
            //     //     next()
            //     // } else {
            //     //     alert("请先登录")
            //     //     next({path: '/login'})
            //     // }
            // })
        },
        watch: {
            '$route'(to, from) {
                console.log(to)
                this.mystatus = to.path;
                let isBack = eval(sessionStorage.isBack)
                if (isBack) {
                    this.transitionName = 'slide-right'
                } else {
                    this.transitionName = 'slide-left'
                }
                sessionStorage.isBack = false
            }
        }
    }
</script>

<style lang="less" type="text/less">
    #app {
        @import "style/tabnav.less";

        .router {
            transition: all .3s ease;
            position: absolute;
        }

        .slide-left-enter,
        .slide-right-leave-active {
            opacity: 0;
            -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
        }

        .slide-left-leave-active,
        .slide-right-enter {
            opacity: 0;
            -webkit-transform: translate(-100%, 0);
            transform: translate(-100% 0);
        }

    }
</style>
